<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, html, div {
            margin: 0;
            padding: 0;
        }


        .lan-comp {
            position: absolute;
            box-sizing: border-box;
            background-color: white;
            border: 1px solid #0a0a0a;
            cursor: pointer;
        }

        .lan-comp-selected {
            border: 3px solid red;
        }

        .lan-container {
            overflow: hidden;
        }

        .can-drop {
            border: 1px dotted #0b3e6f;
        }

        .lan-select-section {
            z-index: 9999;
            border: 2px dashed yellow;
        }

        .lan-current-selected {
            margin-left: -1px;
            margin-top: -1px;
            border: 1px solid blue;
        }

        .can-drag-handle {
            position: absolute;
            left: 0;
            top: 0;
            height: 20px;
            width: 20px;
            cursor: move;
            background-color: pink;
        }

        .tool {
            height: 50px;
        }

        .controls {
            position: relative;
            overflow: hidden;
            width: 100px;
            height: 100%;
            float: left;
        }

        .canvas {
            margin-left: 150px;
            float: left;
        }

        .controls div {
            margin-top: 20px;
            line-height: 30px;
        }

    </style>
</head>
<body>
<div>
    <div class="tool">
        <button ref="leftAlign">左对齐</button>
        <button ref="rightAlign">右对齐</button>
        <button ref="midAlign">中间对齐</button>
        <button ref="top">置顶</button>
        <button rel="bottom">置底</button>
    </div>
    <div>
        <div class="controls">
            <div ref="label">标签</div>
            <div ref="tab_layout">tab布局</div>
            <div ref="border_layout">border布局</div>
            <div ref="line_layout">线性布局</div>
            <div ref="container">普通容器</div>
            <div ref="tab">页签</div>
        </div>
        <div id="root" class="canvas"></div>
    </div>
</div>
<script src="bower_components/lodash/lodash.js"></script>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="b_plan.js"></script>
</body>
</html>
